@extends('layouts.back_stage')
@section('content')
  <style>
   #app{padding:10px}
   [v-cloak] {display: none;}
  .touching{margin-left:10px;float:right}
  .but{margin-right:10px;overflow: hidden;}
  .ingred_sel{width:180px;margin:0 10px 0 5px}
  .shopBg{background:#fff;overflow: hidden;padding:29px 0 28px 20px;margin-top:15px;}
  .table_margin{padding:30px;background:#fff;text-align:center;margin-top:10px}
  .Pagination{margin-top:30px}
  .el-table__expanded-cell{background:#f0f3f9}
  .Dropdown_x .label{float:left;width:100px;font-size:13px;text-align:right;background-color:#f0f3f9}
  .Dropdown_x{overflow:hidden;margin:5px 5px}
  .checked{text-align:left}
  .Dropdown_x .el-checkbox{font-size:10px;float:left;margin-left:10px}
  .Dropdown_x .el-checkbox__label{font-size:10px}
  .titleName{text-align:left}
  .el-table__expanded-cell {background-color: transparent!important;}
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  </style>
  <div class="container">
  <div style="padding:20px 20px 5px 0;overflow:hidden;"><h3 style="float:left;">管理员设置</h3></div>
      <div class="row app" id="app" v-cloak >
        <div class="but">
          <el-button type="primary" class="touching"  @click='addManage' size="small">添加管理员</el-button>
       </div>
       <div class="shopBg">
                    <label>姓名：</label>
                    <el-input  class="ingred_sel"   size="small" v-model="demand.name" placeholder="请输入名称"   clearable></el-input>
                    <label>手机号：</label>
                    <el-input  class="ingred_sel"  size="small" v-model="demand.tel" placeholder="请输入完整手机号码" clearable></el-input>
                    <el-button  class="but-left" size="small" @click="seek" type="primary">搜索 </el-button>
                    <el-button  class="but-left" size="small" @click="reset" type="primary"> 重置 </el-button>
          </div>
          <div class="table_margin">
               <template>
                   <el-table :data="tableData"  border  @filter-change="filterTag"  size="small" @expand-change="spread"  style="width: 100%">
                       <el-table-column type="expand">
                           <template slot-scope="props">
                               <el-collapse v-model="activeNames" size="small">
                                   <el-collapse-item v-for="(item,index) in data" class="titleName" disabled :title="item.name" :name="item.id" :key="item.id">
                                       <el-card class="box-card" v-for="page in item.child" disabled :key="page.name" style="margin-bottom:15px;">
                                           <div slot="header" class="clearfix">
                                               <span>@{{ page.name }}</span>
                                               <el-checkbox style="float: right; padding: 3px 0" disabled v-model="page.allChoose" @change="midAllChoose(page);checkMax(item)">全选</el-checkbox>
                                           </div>
                                           <div class="text item">
                                               <el-checkbox-group v-model="checkList">
                                                   <el-checkbox @change="addFatherNode(item.id,page.id,box.id,page,item)" disabled v-for="box in page.child" :label="box.id" :key="box.id">@{{ box.name }}</el-checkbox>
                                               </el-checkbox-group>
                                           </div>
                                       </el-card>
                                   </el-collapse-item>
                      </el-collapse>
                  </template>
                    </el-table-column>
                    <el-table-column  prop="poopt" label="序号" align="center" :resizable='false' :trigger-on-focus="false" width="50"> </el-table-column>
                    <el-table-column label="姓名" align="center"  prop="admin_name"  :resizable='false' :trigger-on-focus="false"> </el-table-column>
                    <el-table-column label="手机号码" align="center" prop="admin_tel"  :resizable='false' :trigger-on-focus="false" > </el-table-column>
                    <el-table-column align="center" label="公司" column-key="client"  :resizable='false'  :trigger-on-focus="false" :filters="tabBot_a" prop="company_name"> </el-table-column>
                    <el-table-column label="部门" column-key="department"  :filters="tabBot_b" :resizable='false' :trigger-on-focus="false"  align="center"  prop="department"> </el-table-column>
                    <el-table-column label="角色名" column-key="role" :filters="tabBot_c" :resizable='false' :trigger-on-focus="false"   align="center" prop="role"> </el-table-column>
                    <el-table-column  fixed="right" label="操作"  align="center"  :resizable='false'  :trigger-on-focus="false"  width="90">
                         <template slot-scope="scope">
                            <el-button type="text" @click="Modify(scope)" size="small">修改</el-button>
                            <el-button type="text" @click="remove(scope)" size="small">删除</el-button>
                         </template>
                    </el-table-column>
                  </el-table>
                </template>
                <div class="Pagination">
                  <el-pagination  background  layout="prev, pager, next"  @current-change="handleCurrentChange" :total="total"></el-pagination>
               </div> 
          </div>
      </div>
  </div> 
  <script>
      const App=new Vue({
        el: '#app',
        data() {
          return {
              activeNames:[],
              data:[],
              checkList:[],
              tabBot_a:[],//表里下拉的公司
              tabBot_b:[],//表里下拉的部门
              tabBot_c:[],//表里下拉的角色
              Value_x:[],//公司的下拉内容
              Value_B:[],//部门的下拉内容
              Value_C:[],//角色的下拉内容
              checked:true,//多选框
              demand:{//上面查询
                firm:'',////公司
                type:'',//部门
                name:'',//名称
                tel:''//手机号
               },
              total:1,// 最大页数
              current_page:1,//当前页数
              tableData: [],//
              tabrole:'',//表格里面的角色筛选
              form:{
                type:[]
                },
              demand_b:{
                firm:'',
                type:''
              }
          }
        },
        methods: {
            //公司下拉 
            ainValue(val){
             this.demand_b.firm=val[0]
            },
            //公司下拉 
            BinValue(val){
               this.demand_b.firm=val
            },
            //新增管理员1
            addManage(){
              window.location.href = "/admin/create";
            },
            //上面的搜索
            seek(){
              this.demand.name=this.demand.name
              this.demand.tel=this.demand.tel
              let that=this
               $.ajax({
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                  type:'get',
                  url:'/distribute/admin/index',
                  dataType:'json',
                  data:{
                    client:this.demand.firm,
                    department:this.demand.type,
                    name:this.demand.name,
                    tel:this.demand.tel,
                    role:this.tabrole,
                  },
               }).then(function(res){
                res.content.current_page=that.current_page
                that.total=res.content.total
                   var i=-10
                   var opt=[]
                   for(var e in res.content.data){
                    i++;
                      if(res.content.data[e].department==null){
                         res.content.data[e].department=""
                      }
                     if(res.content.data[e].role==null){
                        res.content.data[e].role=''
                      }
                     if(res.content.data[e].client==null){
                         res.content.data[e].client=''
                      }
                     if(res.content.data[e].company==null){
                         res.content.data[e].company=''
                      }
                     opt.push({
                      'poopt':i+(10*that.current_page),
                      "admin_name":res.content.data[e].admin_name,
                      'admin_tel':res.content.data[e].admin_tel,
                      'company_name':res.content.data[e].client.company_name,
                      'department':res.content.data[e].department.department,
                      'role':res.content.data[e].role.rolename,
                      'nameId':res.content.data[e].id,
                      'clientId':res.content.data[e].client.id,
                      'roleId':res.content.data[e].role.id
                     })
                   }
                   that.tableData=opt
               })
            },
            //重置
            reset(){
              this.demand.name=''
              this.demand.tel=''
              this.refurbish()
            },
            //修改
            Modify(scope){
             window.location.href=`/distribute/admin/edit-page/?id=${scope.row.nameId}`
            },
            //删除
            remove(scope){
              let that=this
              this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                    }).then(() => {
                            $.ajax({
                              headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                                },
                                type:'post',
                                url:'/admin/delete',
                                data:{
                                    'id':scope.row.nameId
                                },
                            }).then(function(res){
                              if(res.success==true){
                                  that.refurbish();
                                  that.$message({
                                      type: 'success',
                                      message: '删除成功!'
                          
                                  })
                          
                          }else{
                              that.$message({
                                    type: 'info',
                                    message: res.errorMsg,
                                  }); 
                            }
                      })
                    }).catch(() => {
                      this.$message({
                        type: 'info',
                        message: '已取消删除'
                      });          
                    });
                    
                    
            },
           
            handleCurrentChange(val){
               this.current_page=val
               this.refurbish();
            },
            // 表格里面的筛选
            filterTag(value){
              if(value.client!=undefined){
                 var val1=value.client;
                 var stas1='';
                for(let i=0; i<val1.length;i++){
                    stas1=stas1+val1[i]+',';
                } 
                this.demand.firm=stas1.substr(0, stas1.length - 1);
                let that=this
                that.tabBot_b=[]
                that.tabBot_c=[]
              $.ajax({
                  headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                  type:'get',
                  url:'/departments/getall',
                  dataType:'json',
                  data:{
                    id:this.demand.firm
                  }
              }).then(function(res){
                 for(var e in res.content){
                    that.tabBot_b.push({
                      text:res.content[e].department,
                      value:res.content[e].id
                    })
                 }
                for(var e in res.content.data){
                  that.Value_B.push(res.content.data[e])
                }
              })
              $.ajax({
                  headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                  type:'get',
                  url:'/distribute/role/getall',
                  dataType:'json',
                  data:{
                    id:this.demand.firm
                  }
              }).then(function(res){
                 for(var e in res.content){
                    that.tabBot_c.push({
                      text:res.content[e].rolename,
                      value:res.content[e].id
                    })
                 }
                for(var e in res.content){
                  that.Value_C.push(res.content[e])
                }
              })
                this.filter();
               }
               if(value.department!=undefined){
                 var val1=value.department;
                 var stas1='';
                for(let i=0; i<val1.length;i++){
                    stas1=stas1+val1[i]+',';
                } 
                this.demand.type=stas1.substr(0, stas1.length - 1);
                this.filter();
               }
               if(value.role!=undefined){
                 var val1=value.role;
                 var stas1='';
                for(let i=0; i<val1.length;i++){
                    stas1=stas1+val1[i]+',';
                } 
                this.tabrole=stas1.substr(0, stas1.length - 1);
                this.filter();
               }
            },
            //搜索的时候用的
           filter(){
            let that=this
               $.ajax({
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                  type:'get',
                  url:'/distribute/admin/index',
                  dataType:'json',
                  data:{
                    client:that.demand.firm,
                    department:that.demand.type,
                    name:that.demand.name,
                    tel:that.demand.tel,
                    role:that.tabrole,
                  },
               }).then(function(res){
                res.content.current_page=that.current_page
                that.total=res.content.total
                   var i=-10
                   var opt=[]
                   for(var e in res.content.data){
                    i++;
                     if(res.content.data[e].department==null){
                      res.content.data[e].department=""
                     }
                     if(res.content.data[e].role==null){
                      res.content.data[e].role=''
                      }
                      if(res.content.data[e].client==null){
                      res.content.data[e].client=''
                      }
                     opt.push({
                      'poopt':i+(10*that.current_page),
                      "admin_name":res.content.data[e].admin_name,
                      'admin_tel':res.content.data[e].admin_tel,
                      'company_name':res.content.data[e].client.company_name,
                      'department':res.content.data[e].department.department,
                      'role':res.content.data[e].role.rolename,
                      'nameId':res.content.data[e].id,
                      'clientId':res.content.data[e].client.id,
                      'roleId':res.content.data[e].role.id
                     })
                   }
                   that.tableData=opt
               })
           },
            //点击表格展开事件
            getNode(){
                    let self = this
                    $.ajax({
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        url: '/role/nodeInfo',
                        type: 'get',
                        data: {
                        },
                        dataType: 'json',
                        success: function(res) {
                         // console.log(111,res)
                            if(res.result.success == true){
                                let menu_option = []
                                res.content.menus.forEach(element => {
                                    let page_option = []
                                    let pages_data = res.content.pages
                                    for(var value in pages_data){
                                        if(value == element.id){
                                            let item_option = []
                                            for(let item_pages of pages_data[value]){
                                                let funs_data = res.content.funs
                                                let item_chilld = []
                                                for(let funs in funs_data){
                                                    if(funs == item_pages.id){
                                                        item_chilld = funs_data[funs]
                                                    }
                                                }
                                                item_option.push({"allChoose":false,"name":item_pages.name,"id":item_pages.id,"pid":item_pages.pid,"type":item_pages.type,"child":item_chilld})
                                            }
                                            page_option = item_option
                                        }
                                    }
                                    self.activeNames.push(element.id)
                                    menu_option.push({"name":element.name,"id":element.id,"pid":element.pid,"type":element.type,"child":page_option})
                                })
                                self.data = menu_option
                            }else{
                                self.$notify({
                                    title: '提示',
                                    message:res.result.errorMsg
                                });
                            }
                        },
                        error: function() {
                        }
                    });
                },
            spread(row, expandedRows){
                let that=this
                 $.ajax({
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                    type: 'get',
                    dataType:'json',
                    url: `/role/has_node/${row.roleId}`,
                  }).then(res=>{
                  //  console.log(res.content.roles_node)
                   for(let data in res.content.roles_node){
                     this.checkList.push(Number(res.content.roles_node[data]))
                   }  
                })
            },
            //表格刷新请求
            refurbish(){
               let that=this
               $.ajax({
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                  type:'get',
                  url:'/distribute/admin/index',
                  dataType:'json',
                  data:{
                    current_page:that.current_page,
                    client:this.demand.firm,
                    department:this.demand.type,
                    name:this.demand.name,
                    tel:this.demand.tel,
                    role:this.tabrole,
                  },
               }).then(function(res){
                res.content.current_page=that.current_page
                that.total=res.content.total
                   var i=-10
                   var opt=[]
                   for(var e in res.content.data){
                    i++;
                    if(res.content.data[e].department==null){
                      res.content.data[e].department=""
                     }
                    if(res.content.data[e].role==null){
                      res.content.data[e].role=''
                      }
                    if(res.content.data[e].client==null){
                      res.content.data[e].client=''
                      }
                    if(res.content.data[e].company==null){
                      res.content.data[e].company=''
                      }
                    opt.push({
                      'poopt':i+(10*that.current_page),
                      "admin_name":res.content.data[e].admin_name,
                      'admin_tel':res.content.data[e].admin_tel,
                      'company_name':res.content.data[e].client.company_name,
                      'department':res.content.data[e].department.department,
                      'role':res.content.data[e].role.rolename,
                      'nameId':res.content.data[e].id,
                      'clientId':res.content.data[e].client.id,
                      'roleId':res.content.data[e].role.id
                     })
                   }
                   that.tableData=opt
               })
            },
            //公司下拉
            Dropdown_a(){
              let that=this
              $.ajax({
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                  type:'get',
                  url:'/clients/children',
                  dataType:'json',
              }).then(function(res){
                for(var e in res.content){
                  that.tabBot_a.push({
                     text:res.content[e].company_name,
                     value:res.content[e].id
                   })
                }
                that.Value_x=that.tabBot_a
              })
            },
             //部门下拉
             Dropdown_b(){
              let that=this
              $.ajax({
                  headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                  type:'get',
                  url:'/departments/getall',
                  dataType:'json',
              }).then(function(res){
                 for(var e in res.content){
                    that.tabBot_b.push({
                      text:res.content[e].department,
                      value:res.content[e].id
                    })
                 }
                for(var e in res.content.data){
                  that.Value_B.push(res.content.data[e])
                }
              })
            },
            //角色下拉
            Dropdown_c(){
              let that=this
              $.ajax({
                  headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                  type:'get',
                  url:'/distribute/role/getall',
                  dataType:'json',
              }).then(function(res){
                 for(var e in res.content){
                    that.tabBot_c.push({
                      text:res.content[e].rolename,
                      value:res.content[e].id
                    })
                 }
                for(var e in res.content){
                  that.Value_C.push(res.content[e])
                }
              })
            },
           
          },
     mounted() {
           this.getNode();
           this.refurbish();
           this. Dropdown_a();
           this. Dropdown_b();
           this. Dropdown_c();
          },
      })
  </script>
@endsection